<!-- 采购管理-基础设置-供应商注册通知 -->
<template>
  <div>
    <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
      <template #buts>
        <a-button type="primary" @click="save">保存</a-button>
        <a-button @click="cancel">取消</a-button>
      </template>
    </pageHeader>
    <div class="registerer-supplier">
      <div v-for="(item, index) in list" :key="index">
        <div class="box_title_box">
          <span class="box_title_box_title"> {{ item.title }} </span>
        </div>
        <a-form auto-label-width>
          <a-form-item field="" label="通知前提：">
            <span>
              供应商注册并通过审批后，系统发送短信或者邮件至供应商所提供的手机或者电子邮箱中
              系统自动读取到供应商所提供的手机或者电子邮箱
            </span>
          </a-form-item>
          <a-form-item field="" label="通知方式：">
            <a-checkbox-group :default-value="['1']">
              <a-checkbox value="1">短信通知</a-checkbox>
              <a-checkbox value="2">邮件通知</a-checkbox>
            </a-checkbox-group>
          </a-form-item>
          <a-form-item field="" label="短信通知内容：">
            <a-textarea
              allow-clear
              show-word-limit
              :auto-size="{
                minRows: 5
              }"
              :max-length="100"
              :style="{
                width: '500px'
              }"
            >
            </a-textarea>
          </a-form-item>
          <a-form-item field="" label="邮件通知内容：">
            <a-textarea
              allow-clear
              show-word-limit
              :auto-size="{
                minRows: 5
              }"
              :max-length="100"
              :style="{
                width: '500px'
              }"
            >
            </a-textarea>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';

  const title: string = '供应商注册通知';

  const breadCrumb: string[] = [
    '采购管理',
    '供应商管理',
    '基础设置',
    '供应商注册通知'
  ];

  const list = reactive([
    {
      title: '供应商注册成功通知设置',
      tips: `21321321`
    },
    {
      title: '供应商注册失败通知设置',
      tips: `21321321`
    }
  ]);
</script>

<style scoped lang="less">
  .registerer-supplier {
    padding: 10px 40px;

    .box_title_box {
      height: 40px;
      background-color: #f5f7fa;
      display: flex;
      margin-bottom: 20px;

      &_title {
        line-height: 40px;
        font-weight: 700;
      }
    }

    .box_title_box::before {
      position: relative;
      top: 50%;
      left: 10px;
      display: inline-block;
      height: 20px;
      width: 5px;
      margin-right: 20px;
      border-radius: 2px;
      transform: translateY(-50%);
      content: '';
      background-color: #4e7cf7;
    }
  }
</style>
